Micron Document
<!DOCTYPE html>
<html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-0 vector-toc-not-available vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-0 skin-theme-clientpref-day vector-sticky-header-enabled" lang="de" dir="ltr"><head>
<meta charset="UTF-8">
<title>AngularJS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="./_res_/favicon.png">
<link rel="canonical" href="https://de.wikipedia.org/wiki/AngularJS"> <link href="./_mw_/ext.cite.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.pygments.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.wikimediamessages.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.icons.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.search.codex.styles.css" rel="stylesheet" type="text/css">
<link href="./_mw_/skins.vector.styles.css" rel="stylesheet" type="text/css">
<meta name="ResourceLoaderDynamicStyles" content="">
<link href="./_mw_/ext.gadget.citeRef.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.defaultPlainlinks.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonHide.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonLayout.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiCommonStyle.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiDarkmode.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.dewikiResponsive.css" rel="stylesheet" type="text/css">
<link href="./_mw_/ext.gadget.specialSearch.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="./_mw_/site.styles.css">
<link rel="stylesheet" type="text/css" href="./_mw_/noscript.css">
<link rel="stylesheet" type="text/css" href="./_res_/footer.css">
<link rel="stylesheet" type="text/css" href="./_res_/vector-2022.css">
</head>
<body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject page-AngularJS rootpage-AngularJS skin-vector-2022 action-view">
<div class="mw-page-container">
<div class="mw-page-container-inner">
<div class="mw-content-container">
<main id="content" class="mw-body">
<header class="mw-body-header vector-page-titlebar">
<h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">AngularJS</span></h1>
</header>
<a id="top"></a>
<div id="bodyContent" class="vector-body ve-init-mw-desktopArticleTarget-targetContainer" aria-labelledby="firstHeading" data-mw-ve-target-container="">
<div id="contentSub">
<div id="mw-content-subtitle"></div>
</div>
<div id="mw-content-text" class="mw-body-content mw-content-ltr" lang="de" dir="ltr"><div class="mw-content-ltr mw-parser-output" lang="de" dir="ltr"><table class="float-right infobox toccolours toptextcells" style="border-spacing:5px; font-size:90%; text-align:left; width:21em;">

<tbody><tr>
<th colspan="2" class="hintergrundfarbe6" style="font-size:105%; text-align:center;">AngularJS
<p class="mw-empty-elt">
</p>
</th></tr>
<tr>
<td colspan="2" class="notheme" style="text-align:center; background-color:#f8f9fa;"><span typeof="mw:File"></span>
</td></tr>
<tr>
<th colspan="2" class="hintergrundfarbe5" style="font-size:105%; text-align:center;">Basisdaten
<p class="mw-empty-elt">
</p>
</th></tr>
<tr>
<td><b><a href="Maintainer" title="Maintainer">Hauptentwickler</a></b>
</td>
<td><a href="Google_Inc." class="mw-redirect" title="Google Inc.">Google Inc.</a>
</td></tr>
<tr>
<td><b><a href="Softwareentwickler" title="Softwareentwickler">Entwickler</a></b>
</td>
<td>Google Inc., <a href="Online-Community" title="Online-Community">Online-Community</a>
</td></tr>
<tr>
<td><b>Erscheinungsjahr</b>
</td>
<td><span class="wikidata-content">20. Oktober 2010</span>
</td></tr>
<tr>
<td><b>Aktuelle&nbsp;<a href="Version_(Software)" title="Version (Software)">Version</a></b>
</td>
<td><span class="wikidata-content">1.8.3<sup id="cite_ref-_498314b64e12eeda_1-0" class="reference"><a href="#cite_note-_498314b64e12eeda-1"><span class="cite-bracket">[</span>1<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-_30c7ad648d9ed2cd_2-0" class="reference"><a href="#cite_note-_30c7ad648d9ed2cd-2"><span class="cite-bracket">[</span>2<span class="cite-bracket">]</span></a></sup></span> <br> (<span class="wikidata-content">7. April 2022</span>)
</td></tr>
<tr>
<td><b><a href="Programmiersprache" title="Programmiersprache">Programmier­sprache</a></b>
</td>
<td><a href="TypeScript" title="TypeScript">TypeScript</a>, <a href="JavaScript" title="JavaScript">JavaScript</a>
</td></tr>
<tr>
<td><b>Kategorie</b>
</td>
<td><a href="Framework" title="Framework">Framework</a>
</td></tr>
<tr>
<td><b>Lizenz</b>
</td>
<td><a href="MIT-Lizenz" title="MIT-Lizenz">MIT-Lizenz</a>
</td></tr>
<tr>
<td><b><a href="Lokalisierung_(Softwareentwicklung)" title="Lokalisierung (Softwareentwicklung)">deutschsprachig</a></b>
</td>
<td>nein
</td></tr>
<tr>
<td class="hintergrundfarbe5" colspan="2" style="text-align:center;"><a rel="nofollow" class="external text" href="https://www.angularjs.org/">www.angularjs.org</a>
</td></tr></tbody></table>
<p><b>AngularJS</b> (zur Abgrenzung vom Nachfolger <a href="Angular" title="Angular">Angular</a> (Version 2 und höher) auch <b>AngularJS 1</b> oder <b>Angular 1</b> bezeichnet) ist ein <a href="Clientseitige_Anwendung" class="mw-redirect" title="Clientseitige Anwendung">clientseitiges</a> <a href="JavaScript" title="JavaScript">JavaScript</a>-<a href="Webframework" title="Webframework">Webframework</a> zur Erstellung von <a href="Single-Page-Webanwendung" title="Single-Page-Webanwendung">Single-Page-Webanwendungen</a> nach einem <a href="Model_View_ViewModel" title="Model View ViewModel">Model-View-ViewModel</a>-Muster. Die <a href="Softwareentwicklung" class="mw-redirect" title="Softwareentwicklung">Softwareentwicklung</a> und das <a href="Komponententest" class="mw-redirect" title="Komponententest">Komponententesten</a> können damit vereinfacht werden. Es wurde als <a href="Open_Source" title="Open Source">Open-Source</a>-<a href="Framework" title="Framework">Framework</a> vom <a href="Vereinigte_Staaten" title="Vereinigte Staaten">US-amerikanischen</a> Unternehmen <a href="Google_Inc." class="mw-redirect" title="Google Inc.">Google Inc.</a> publiziert. Der Long Term Support (LTS) wurde am 31. Dezember 2021 eingestellt.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3"><span class="cite-bracket">[</span>3<span class="cite-bracket">]</span></a></sup>
</p><p>Im September 2016 wurde die stark verbesserte, nicht rückwärts-kompatible Version <a href="Angular_2" class="mw-redirect" title="Angular 2">Angular 2</a> herausgegeben.<sup id="cite_ref-4" class="reference"><a href="#cite_note-4"><span class="cite-bracket">[</span>4<span class="cite-bracket">]</span></a></sup> Der Begriff <i>AngularJS</i> wird nunmehr eingeschränkt auf Version&nbsp;1 verwendet, <i>Angular</i> ohne Zusatz nur für die höheren Versionen.
</p>

<div class="mw-heading mw-heading2"><h2 id="Konzept">Konzept</h2></div>
<p>Die Philosophie von AngularJS basiert auf der Annahme, dass deklarative Programmierung (in <a href="Hypertext_Markup_Language" title="Hypertext Markup Language">HTML</a>) verwendet werden sollte, um Benutzeroberflächen zu gestalten und Softwarekomponenten miteinander zu verbinden, während <a href="Imperative_Programmierung" title="Imperative Programmierung">imperative Programmierung</a> (in JavaScript in Form von AngularJS) für die Umsetzung von Programmlogik verwendet werden sollte.
</p><p>Der Aufbau von AngularJS orientiert sich lose am <a href="Model_View_Controller" title="Model View Controller">MVC</a>-Muster, insbesondere dem MVVM-Muster, nach welchem eine Software in Models (Datenmodelle), Views (Benutzeroberfläche) und ViewModels (zur Veränderung der Benutzeroberfläche nach Interaktion mit den Daten) gegliedert wird.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5"><span class="cite-bracket">[</span>5<span class="cite-bracket">]</span></a></sup>
</p><p>AngularJS erweitert das Vokabular von HTML um neue Tags und Parameter, die <i>Direktiven</i>, aus welchen zur Laufzeit Funktionalität generiert wird. Dies geschieht über sogenannte <i>Datenbindungen</i>, durch welche einzelne Elemente einer Webapplikation mit einem Datensatz verkoppelt werden. Interagiert der Benutzer mit der Applikation, können die Datensätze verändert oder anders dargestellt werden, etwa durch die Sortierung einer Tabelle nach einem anderen Kriterium. So kann Funktionalität erzeugt werden, ohne auf <a href="Document_Object_Model" title="Document Object Model">DOM</a>-Manipulation via <a href="JQuery" title="JQuery">jQuery</a> oder ähnlicher <a href="Softwarebibliothek" class="mw-redirect" title="Softwarebibliothek">Bibliotheken</a> zurückzugreifen.
</p><p>Die verwendeten Datenmodelle werden nicht in AngularJS selbst definiert, sondern übernommen wie sie sind. Insbesondere gibt es keine clientseitige Entitätenverwaltung, wie in anderen Single-Page-Frameworks.
</p><p>AngularJS-Applikationen werden in verschiedene Module untergliedert:
</p>
<ul><li><b>Templates</b> definieren den Aufbau der <a href="Grafische_Benutzeroberfl%C3%A4che" title="Grafische Benutzeroberfläche">Benutzeroberfläche</a>.</li>
<li><b>Controller</b> enthalten die Programmlogik.</li>
<li><b>Scopes</b> verwalten die Daten, auf die ein Programmbaustein zugreifen kann.</li>
<li><b>Filter</b> sortieren die Daten dynamisch nach vorgegebenen Kriterien.</li>
<li><b>Provider</b> stellen weitere Funktionalitäten (üblicherweise unter anderem die Interaktion mit einem <a href="Frontend_und_Backend" title="Frontend und Backend">Backend</a>) zur Verfügung.</li></ul>
<p>Diese Module werden vom sogenannten <i>Dependency-Injection-Container</i> beim Aufruf der Applikation durch <a href="Bootstrapping_(Programmierung)" title="Bootstrapping (Programmierung)">Bootstrapping</a> zu einem lose gekoppelten Programm zusammengeführt, welches aus wiederverwertbaren Teilkomponenten besteht. So entsteht eine wartbare Software im Sinne der <a href="ISO/IEC_25000" title="ISO/IEC 25000">ISO/IEC 25010</a>. Technisch gesehen ist eine solche Anwendung eine Eventschleife, die jede Änderung abfängt, auswertet und ggf. Aktualisierungen in der Präsentation initiiert. Nichtveränderliche Daten können mittels eines <i>One-Time-Bindings</i> einmalig gebunden und von weiteren Aktualisierungen ausgeschlossen werden.
</p><p>Ein mitgeliefertes <a href="Mock-Objekt" title="Mock-Objekt">Mocking</a>-Modul erlaubt es Standardfunktionalitäten, wie die Komponente zum Durchführen von HTTP-Anfragen, durch Attrappen zu ersetzen und so isolierte <a href="Testfall" title="Testfall">Testfälle</a> umzusetzen, ohne tatsächlich Anfragen zu verschicken oder Daten zu verändern. Dadurch ist die isolierte Testbarkeit der einzelnen Module gegeben.<sup id="cite_ref-6" class="reference"><a href="#cite_note-6"><span class="cite-bracket">[</span>6<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="Struktur">Struktur</h2></div>
<div class="mw-heading mw-heading3"><h3 id="Controller">Controller</h3></div>
<p>In AngularJS wird ein clientseitiges Model (nach dem Model-View-ViewModel-Muster ein ViewModel) gemeinsam mit der Logik in einem Controller definiert. Die Controller werden anschließend zu einem Modul zusammengefasst. Die Module werden mit Hilfe eines integrierten <a href="Dependency_Injection" title="Dependency Injection">Dependency-Injection</a>-Containers in die Applikation eingebunden. Dabei wird die View mit dem Model verbunden. Diese Datenbindung ist bidirektional, das heißt, Benutzereingaben wirken sich auf das Model aus, programmatische Änderungen am Model aber auch auf die Benutzeransicht.
</p>
<div class="mw-heading mw-heading3"><h3 id="Direktiven">Direktiven</h3></div>
<p>AngularJS ermöglicht es, benutzerdefinierte HTML-Elemente und -Attribute, sogenannte Direktiven, zu erstellen.
</p><p>Vordefinierte Direktiven sind am ng-<a href="Namensraum" title="Namensraum">Namensraum</a> im Präfix erkennbar. Die Art des zu benutzenden Präfixes ist dabei vom <a href="Validator" title="Validator">Validator</a> abhängig.
</p>
<table class="wikitable">
<caption>Präfix-Syntax für Direktiven
</caption>
<tbody><tr>
<th>Validator</th>
<th>Beispiel
</th></tr>
<tr>
<td>keiner</td>
<td><code><b>ng-</b>repeat="item in items"</code>
</td></tr>
<tr>
<td>XML</td>
<td><code><b>ng:</b>repeat="item in items"</code>
</td></tr>
<tr>
<td>HTML5</td>
<td><code><b>data-ng-</b>repeat="item in items"</code>
</td></tr>
<tr>
<td>xHTML</td>
<td><code><b>x-ng-</b>repeat="item in items"</code>
</td></tr>
</tbody></table>
<p>Um Elemente auszuwählen, verwendet AngularJS ein integriertes jQuery Lite <i>(jqLite)</i>. Dabei handelt es sich um eine reduzierte Version von <a href="JQuery" title="JQuery">jQuery</a>, in welcher nur die wichtigsten Funktionalitäten eingebunden sind. Wird jQuery in das HTML-<a href="Document_Object_Model" title="Document Object Model">DOM</a> eingebunden, wird dieses statt jQuery Lite verwendet.
</p>
<div class="mw-heading mw-heading3"><h3 id="Interpolation">Interpolation</h3></div>
<p>Mit Hilfe von doppelten geschweiften Klammern <i>(<span lang="en">double-curly syntax</span>)</i> können JavaScript-Ausdrücke im HTML-Code eingebettet werden. Hierbei werden jedoch keine <a href="Sprunganweisung" title="Sprunganweisung">Sprunganweisungen</a> unterstützt. Mit dem Pipe-Operator <code>|</code> können <a href="Pipes_und_Filter" title="Pipes und Filter">Filter</a> hinzugefügt werden, die sich auf das angezeigte Resultat auswirken.
</p><p>Alternativ kann auch <code>ng-bind</code> verwendet werden. Die Befehle <code style="white-space:nowrap">&lt;span ng-bind="name"&gt;&lt;/span&gt;</code> und <code>&lt;span&gt;{{name}}&lt;/span&gt;</code> führen beide dazu, dass der Wert der Variable <code>name</code> angezeigt wird. Mit <code>ng-bind</code> wird jedoch verhindert, dass der Browser beim erstmaligen Laden die Vorlage anzeigt, falls AngularJS die Daten nicht schnell genug geladen und damit die Vorlage ersetzt hat.
</p>
<div class="mw-heading mw-heading3"><h3 id="Services">Services</h3></div>
<p>Services enthalten die Geschäftslogik und binden externe Ressourcen –&nbsp;etwa <a href="Representational_State_Transfer" title="Representational State Transfer">REST</a>-Webservices&nbsp;– ein. Services werden als <a href="Singleton_(Entwurfsmuster)" title="Singleton (Entwurfsmuster)">Singleton</a> instanziiert.
</p><p>Services können selbst programmiert werden oder von Drittanbietern übernommen werden. Das AngularJS-Framework stellt aber bereits zahlreiche Services (erkennbar am $-Präfix) zur Verfügung. Dazu zählen beispielsweise <code>$http</code> und <code>$resource</code>, die zum Durchführen von <a href="Ajax_(Programmierung)" title="Ajax (Programmierung)">Ajax</a>-Anfragen dienen. Beide greifen intern auf das XMLHttpRequest-Objekt zu und unterscheiden sich im Abstraktionsgrad. Während <code>$http</code> beliebige HTTP-Anfragen durchführen kann, ist <code>$resource</code> auf REST-Services spezialisiert.
</p>
<div class="mw-heading mw-heading3"><h3 id="Kommunikation_zwischen_Scopes">Kommunikation zwischen Scopes</h3></div>
<p>Jeder Controller besitzt ein eigenes <code>$scope</code>-Objekt, welches die zum Controller gehörigen Funktionen und Daten <a href="Datenkapselung_(Programmierung)" title="Datenkapselung (Programmierung)">kapselt</a>. Damit Controller mit anderen Controllern oder Services kommunizieren können, werden vom <code>$scope</code>- bzw. vom <code>$rootScope</code>-Objekt <code>$emit</code>- und <code>$broadcast</code>-Methoden zur Verfügung gestellt. Dabei dient <code>$emit</code> dazu, Nachrichten an alle übergeordneten Scopes zu senden, während <code>$broadcast</code> dazu dient, Nachrichten an untergeordnete Scopes zu senden.
</p><p>Damit ein Controller oder ein Service auf eine Nachricht reagieren kann, muss er sich für die Nachricht mit Hilfe der <code>$on</code>-Methode für den Nachrichtentyp registrieren (<a href="Beobachter_(Entwurfsmuster)" title="Beobachter (Entwurfsmuster)">Publish-Subscribe-Verfahren</a>).
</p>
<div class="mw-heading mw-heading3"><h3 id="Routen_in_Single-Page-Applikationen">Routen in Single-Page-Applikationen</h3></div>
<p>In Single-Page-Applikationen werden mit Routen die Zuordnung von <a href="Uniform_Resource_Locator" title="Uniform Resource Locator">URLs</a> zu spezifischen Ansichten festgelegt. Zu diesem Zweck stellt AngularJS das <code>ngRoute</code>-Modul<sup id="cite_ref-7" class="reference"><a href="#cite_note-7"><span class="cite-bracket">[</span>7<span class="cite-bracket">]</span></a></sup> bereit. Damit können innerhalb der globalen HTML-Vorlage verschiedene Ansichten (HTML-Fragmente) dynamisch in ein Element mit der <code>ng-view</code>-Direktive<sup id="cite_ref-8" class="reference"><a href="#cite_note-8"><span class="cite-bracket">[</span>8<span class="cite-bracket">]</span></a></sup> nachgeladen werden.
</p><p>Dabei kann man nur eine einzelne <code>ng-view</code>-Direktive pro Seite angeben. Abhilfe schafft hier der alternative <a href="Benutzerschnittstelle" title="Benutzerschnittstelle">UI</a>-Router des AngularUI-Projekts, dessen Funktionsumfang weitaus größer ist<sup id="cite_ref-9" class="reference"><a href="#cite_note-9"><span class="cite-bracket">[</span>9<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-10" class="reference"><a href="#cite_note-10"><span class="cite-bracket">[</span>10<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-11" class="reference"><a href="#cite_note-11"><span class="cite-bracket">[</span>11<span class="cite-bracket">]</span></a></sup>, sowie das Modul <i>Angular-Route-Segment</i>, welches leichtgewichtiger ist und die Schnittstelle des vorhandenen AngularJS-Routers lediglich erweitert.<sup id="cite_ref-12" class="reference"><a href="#cite_note-12"><span class="cite-bracket">[</span>12<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-13" class="reference"><a href="#cite_note-13"><span class="cite-bracket">[</span>13<span class="cite-bracket">]</span></a></sup>
</p><p>Das <code>$location</code>-Objekt<sup id="cite_ref-14" class="reference"><a href="#cite_note-14"><span class="cite-bracket">[</span>14<span class="cite-bracket">]</span></a></sup> erlaubt die direkte Verarbeitung der Browser-URL, so dass eine Seitennavigation simuliert werden kann.
</p>
<div class="mw-heading mw-heading2"><h2 id="Hallo-Welt-Programm">Hallo-Welt-Programm</h2></div>
<p>Im Folgenden wird ein <a href="Hallo-Welt-Programm" title="Hallo-Welt-Programm">Hallo-Welt-Programm</a> in AngularJS gezeigt:
</p><p>In <code>Default.html</code>:
</p>
<div class="mw-highlight mw-highlight-lang-html mw-content-ltr" dir="ltr"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Hello World!<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"http://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"controller.js"</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">ng-app</span><span class="o">=</span><span class="s">"helloWorldModule"</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span> <span class="na">ng-controller</span><span class="o">=</span><span class="s">"HelloWorldController"</span><span class="p">&gt;</span>
Name: <span class="p">&lt;</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">ng-model</span><span class="o">=</span><span class="s">"name"</span> <span class="na">required</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">hr</span><span class="p">&gt;</span>
<span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>Hello {{name}}!<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
<p>In <code>controller.js</code>:
</p>
<div class="mw-highlight mw-highlight-lang-javascript mw-content-ltr" dir="ltr"><pre><span></span><span class="s1">'use strict'</span><span class="p">;</span>
<span class="c1">// definieren eines Moduls</span>
<span class="kd">var</span><span class="w"> </span><span class="nx">helloWorldModule</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">angular</span><span class="p">.</span><span class="nx">module</span><span class="p">(</span><span class="s2">"helloWorldModule"</span><span class="p">,</span><span class="w"> </span><span class="p">[]);</span>

<span class="c1">// hinzufügen eines Controllers zum Modul</span>
<span class="nx">helloWorldModule</span><span class="p">.</span><span class="nx">controller</span><span class="p">(</span><span class="s2">"HelloWorldController"</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="p">(</span><span class="nx">$scope</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
<span class="w"> </span><span class="nx">$scope</span><span class="p">.</span><span class="nx">name</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s2">"World"</span><span class="p">;</span>
<span class="p">});</span>
</pre></div>
<div class="mw-heading mw-heading2"><h2 id="Angulardart">Angulardart</h2></div>
<p>Mit Angulardart ist eine Version für die Programmiersprache <a href="Dart_(Programmiersprache)" title="Dart (Programmiersprache)">Dart</a> verfügbar. Angulardart lehnt sich eng an AngularJS an, wobei die zusätzlichen Möglichkeiten von Dart wie Metadaten, Typen und Klassen genutzt werden.<sup id="cite_ref-15" class="reference"><a href="#cite_note-15"><span class="cite-bracket">[</span>15<span class="cite-bracket">]</span></a></sup><sup id="cite_ref-16" class="reference"><a href="#cite_note-16"><span class="cite-bracket">[</span>16<span class="cite-bracket">]</span></a></sup>
</p>
<div class="mw-heading mw-heading2"><h2 id="Siehe_auch">Siehe auch</h2></div>
<p><b>JavaScript-Bibliotheken</b>
</p>
<ul><li><a href="JQuery" title="JQuery">jQuery</a></li>
<li><a href="RequireJS" title="RequireJS">RequireJS</a></li></ul>
<p><b>JavaScript MV*-Frameworks</b>
</p>
<ul><li><a href="Ember.js" title="Ember.js">Ember.js</a></li>
<li><a href="React" title="React">React</a></li>
<li><a href="Vue.js" title="Vue.js">Vue.js</a></li>
<li><a href="Backbone.js" title="Backbone.js">Backbone.js</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Literatur">Literatur</h2></div>
<ul><li>Philipp Tarasiewicz, Robin Böhm: <cite style="font-style:italic">AngularJS: Eine praktische Einführung in das JavaScript-Framework</cite>. 1. Auflage. dpunkt.verlag, 2014, ISBN 978-3-86490-154-6, <span style="white-space:nowrap">S.<span style="display:inline-block;width:.2em">&nbsp;</span>354</span>.<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rfr_id=info:sid/de.wikipedia.org:AngularJS&amp;rft.au=Philipp+Tarasiewicz%2C+Robin+B%C3%B6hm&amp;rft.btitle=AngularJS%3A+Eine+praktische+Einf%C3%BChrung+in+das+JavaScript-Framework&amp;rft.date=2014&amp;rft.edition=1.&amp;rft.genre=book&amp;rft.isbn=9783864901546&amp;rft.pages=354&amp;rft.pub=dpunkt.verlag" style="display:none">&nbsp;</span></li>
<li>Brad Green, Shyam Seshadri: <cite class="lang" lang="en" dir="auto" style="font-style:italic">AngularJS</cite>. 1. Auflage. O’Reilly Media, 2013, ISBN 978-1-4493-4485-6, <span style="white-space:nowrap">S.<span style="display:inline-block;width:.2em">&nbsp;</span>180</span> (englisch).<span class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Abook&amp;rfr_id=info:sid/de.wikipedia.org:AngularJS&amp;rft.au=Brad+Green%2C+Shyam+Seshadri&amp;rft.btitle=AngularJS&amp;rft.date=2013&amp;rft.edition=1.&amp;rft.genre=book&amp;rft.isbn=9781449344856&amp;rft.pages=180&amp;rft.pub=O%E2%80%99Reilly+Media" style="display:none">&nbsp;</span></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Weblinks">Weblinks</h2></div>
<div class="sisterproject" style="margin:0.1em 0 0 0;"><div class="noresize noviewer" style="display:inline-block; line-height:10px; min-width:1.6em; text-align:center;" aria-hidden="true" role="presentation"><span class="mw-default-size" typeof="mw:File"><span title="Commons"></span></span></div><b><span class=""><a class="external text" href="https://commons.wikimedia.org/wiki/Category:AngularJS?uselang=de"><span lang="en">Commons</span>: AngularJS</a></span></b>&nbsp;– Sammlung von Bildern</div>
<ul><li><a rel="nofollow" class="external text" href="https://angularjs.org/">Offizielle Webpräsenz von AngularJS</a> (englisch)</li>
<li><a rel="nofollow" class="external text" href="https://angular.de/">Inoffizielle deutschsprachige Website zu AngularJS</a></li></ul>
<div class="mw-heading mw-heading2"><h2 id="Einzelnachweise">Einzelnachweise</h2></div>
<ol class="references">
<li id="cite_note-_498314b64e12eeda-1"><span class="mw-cite-backlink"><a href="#cite_ref-_498314b64e12eeda_1-0">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://github.com/angular/angular.js/releases/tag/v1.8.3"><cite style="font-style:italic"><span lang="en">Release 1.8.3</span></cite>.</a> 7.&nbsp;April 2022 (abgerufen am 29.&nbsp;Juli 2022).</span>
</li>
<li id="cite_note-_30c7ad648d9ed2cd-2"><span class="mw-cite-backlink"><a href="#cite_ref-_30c7ad648d9ed2cd_2-0">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://github.com/angular/angular.js/blob/master/CHANGELOG.md#183-ultimate-farewell-2022-04-07"><cite style="font-style:italic"><span lang="en">1.8.3 ultimate-farewell (2022-04-07)</span></cite>.</a></span>
</li>
<li id="cite_note-3"><span class="mw-cite-backlink"><a href="#cite_ref-3">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c">Stable AngularJS and Long Term Support</a></span>
</li>
<li id="cite_note-4"><span class="mw-cite-backlink"><a href="#cite_ref-4">↑</a></span> <span class="reference-text"><style data-mw-deduplicate="TemplateStyles:r261891140">
/* start https://de.wikipedia.org/ */


.mw-parser-output .webarchiv-memento a{color:inherit}


/* end https://de.wikipedia.org/ */
</style><a rel="nofollow" class="external text" href="https://web.archive.org/web/20170131171244/https://www.agriya.com/blog/2016/09/27/angularjs-is-no-more-the-future-of-typescript-and-angular-2/">AngularJS is No More – The Future of TypeScript and Angular 2?</a> (<span class="webarchiv-memento"><a href="Webarchivierung#Begrifflichkeiten" title="Webarchivierung">Memento</a></span> des <style data-mw-deduplicate="TemplateStyles:r250917974">
/* start https://de.wikipedia.org/ */


.mw-parser-output .dewiki-iconexternal>a{background-position:center right!important;background-repeat:no-repeat!important}body.skin-minerva .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/OOjs_UI_icon_external-link-ltr-progressive.svg")!important;background-size:10px!important;padding-right:13px!important}body.skin-timeless .mw-parser-output .dewiki-iconexternal>a,body.skin-monobook .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/MediaWiki_external_link_icon.svg")!important;padding-right:13px!important}body.skin-vector .mw-parser-output .dewiki-iconexternal>a{background-image:url("./_mw_/Link.ernal-small-ltr-progressive.svg")!important;background-size:0.857em!important;padding-right:1em!important}


/* end https://de.wikipedia.org/ */
</style><span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=https%3A%2F%2Fwww.agriya.com%2Fblog%2F2016%2F09%2F27%2Fangularjs-is-no-more-the-future-of-typescript-and-angular-2%2F">Originals</a></span> vom 31. Januar 2017 im <i><a href="Internet_Archive" title="Internet Archive">Internet Archive</a></i>) <small class="archiv-bot"><span class="wp_boppel noviewer" aria-hidden="true" role="presentation"><span typeof="mw:File"><span title="i"></span></span></span>&nbsp;<b>Info:</b> Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.</small><span style="display:none"><a rel="nofollow" class="external text" href="http://IABotmemento.invalid/https://www.agriya.com/blog/2016/09/27/angularjs-is-no-more-the-future-of-typescript-and-angular-2/">@1</a></span><span style="display:none"><a rel="nofollow" class="external text" href="https://www.agriya.com/blog/2016/09/27/angularjs-is-no-more-the-future-of-typescript-and-angular-2/">@2</a></span><span style="display:none">Vorlage:Webachiv/IABot/www.agriya.com</span></span>
</li>
<li id="cite_note-5"><span class="mw-cite-backlink"><a href="#cite_ref-5">↑</a></span> <span class="reference-text"><span class="cite">Golo Roden: <a rel="nofollow" class="external text" href="https://www.heise.de/developer/artikel/Webanwendungen-mit-AngularJS-1955101.html?seite=all"><i>Webanwendungen mit AngularJS.</i></a> Heise Online, 13.&nbsp;September 2013,<span class="Abrufdatum"> abgerufen am 2.&nbsp;September 2019</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=Webanwendungen+mit+AngularJS&amp;rft.description=Webanwendungen+mit+AngularJS&amp;rft.identifier=https%3A%2F%2Fwww.heise.de%2Fdeveloper%2Fartikel%2FWebanwendungen-mit-AngularJS-1955101.html%3Fseite%3Dall&amp;rft.creator=Golo+Roden&amp;rft.publisher=Heise+Online&amp;rft.date=2013-09-13&amp;rft.language=de">&nbsp;</span></span>
</li>
<li id="cite_note-6"><span class="mw-cite-backlink"><a href="#cite_ref-6">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://docs.angularjs.org/api/ngMock"><i>API Reference / ngMock.</i></a> In: <i>angularjs.org.</i><span class="Abrufdatum"> Abgerufen am 2.&nbsp;September 2019</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=API+Reference+%2F+ngMock&amp;rft.description=API+Reference+%2F+ngMock&amp;rft.identifier=https%3A%2F%2Fdocs.angularjs.org%2Fapi%2FngMock&amp;rft.language=en">&nbsp;</span></span>
</li>
<li id="cite_note-7"><span class="mw-cite-backlink"><a href="#cite_ref-7">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://docs.angularjs.org/api/ngRoute"><i>ngRoute.</i></a> In: <i>AngularJS Developer Documentation.</i><span class="Abrufdatum"> Abgerufen am 2.&nbsp;Oktober 2013</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=ngRoute&amp;rft.description=ngRoute&amp;rft.identifier=https%3A%2F%2Fdocs.angularjs.org%2Fapi%2FngRoute&amp;rft.language=en">&nbsp;</span></span>
</li>
<li id="cite_note-8"><span class="mw-cite-backlink"><a href="#cite_ref-8">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://docs.angularjs.org/api/ngRoute.directive:ngView"><i>ngView.</i></a> In: <i>AngularJS Developer Documentation.</i><span class="Abrufdatum"> Abgerufen am 2.&nbsp;Oktober 2013</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=ngView&amp;rft.description=ngView&amp;rft.identifier=https%3A%2F%2Fdocs.angularjs.org%2Fapi%2FngRoute.directive%3AngView&amp;rft.language=en">&nbsp;</span></span>
</li>
<li id="cite_note-9"><span class="mw-cite-backlink"><a href="#cite_ref-9">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://angular-ui.github.io/"><i>AngularUI for AngularJS.</i></a><span class="Abrufdatum"> Abgerufen am 27.&nbsp;August 2014</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=AngularUI+for+AngularJS&amp;rft.description=AngularUI+for+AngularJS&amp;rft.identifier=https%3A%2F%2Fangular-ui.github.io%2F&amp;rft.language=en">&nbsp;</span></span>
</li>
<li id="cite_note-10"><span class="mw-cite-backlink"><a href="#cite_ref-10">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20150402105954/http://jswiki.de/UI-Router"><i>UI-Router – JsWiki.de, das deutsche Wiki rund um JavaScript.</i></a> Archiviert vom <span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=http%3A%2F%2Fjswiki.de%2FUI-Router">Original</a></span> (nicht mehr online verfügbar) am <span style="white-space:nowrap;">2.&nbsp;April 2015</span><span>;</span><span class="Abrufdatum"> abgerufen am 19.&nbsp;März 2015</span>.</span> <small class="archiv-bot"><span class="wp_boppel noviewer" aria-hidden="true" role="presentation"><span typeof="mw:File"><span title="i"></span></span></span>&nbsp;<b>Info:</b> Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.</small><span style="display:none"><a rel="nofollow" class="external text" href="http://IABotmemento.invalid/http://jswiki.de/UI-Router">@1</a></span><span style="display:none"><a rel="nofollow" class="external text" href="http://jswiki.de/UI-Router">@2</a></span><span style="display:none">Vorlage:Webachiv/IABot/jswiki.de</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=UI-Router+%E2%80%93+JsWiki.de%2C+das+deutsche+Wiki+rund+um+JavaScript&amp;rft.description=UI-Router+%E2%80%93+JsWiki.de%2C+das+deutsche+Wiki+rund+um+JavaScript&amp;rft.identifier=https%3A%2F%2Fweb.archive.org%2Fweb%2F20150402105954%2Fhttp%3A%2F%2Fjswiki.de%2FUI-Router&amp;rft.source=http://jswiki.de/UI-Router&amp;rft.language=de">&nbsp;</span></span>
</li>
<li id="cite_note-11"><span class="mw-cite-backlink"><a href="#cite_ref-11">↑</a></span> <span class="reference-text"><span class="cite">Golo Roden: <a rel="nofollow" class="external text" href="https://www.heise.de/developer/artikel/Verschachtelte-Ansichten-mit-AngularJS-1857240.html"><i>Verschachtelte Ansichten mit AngularJS.</i></a> In: <i>Heise Developer.</i> <a href="Verlag_Heinz_Heise" class="mw-redirect" title="Verlag Heinz Heise">Verlag Heinz Heise</a>, 6.&nbsp;Mai 2013,<span class="Abrufdatum"> abgerufen am 2.&nbsp;Oktober 2013</span>.</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=Verschachtelte+Ansichten+mit+AngularJS&amp;rft.description=Verschachtelte+Ansichten+mit+AngularJS&amp;rft.identifier=https%3A%2F%2Fwww.heise.de%2Fdeveloper%2Fartikel%2FVerschachtelte-Ansichten-mit-AngularJS-1857240.html&amp;rft.creator=Golo+Roden&amp;rft.publisher=%5B%5BVerlag+Heinz+Heise%5D%5D&amp;rft.date=2013-05-06&amp;rft.language=de">&nbsp;</span></span>
</li>
<li id="cite_note-12"><span class="mw-cite-backlink"><a href="#cite_ref-12">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="http://angular-route-segment.com/"><i>angular-route-segment.com.</i></a><span class="Abrufdatum"> Abgerufen am 19.&nbsp;März 2015</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=angular-route-segment.com&amp;rft.description=angular-route-segment.com&amp;rft.identifier=http%3A%2F%2Fangular-route-segment.com%2F&amp;rft.language=en">&nbsp;</span></span>
</li>
<li id="cite_note-13"><span class="mw-cite-backlink"><a href="#cite_ref-13">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://web.archive.org/web/20150402151910/http://jswiki.de/Angular-Route-Segment"><i>Angular-Route-Segment – JsWiki.de, das deutsche Wiki rund um JavaScript.</i></a> Archiviert vom <span class="dewiki-iconexternal"><a class="external text" href="https://redirecter.toolforge.org/?url=http%3A%2F%2Fjswiki.de%2FAngular-Route-Segment">Original</a></span> (nicht mehr online verfügbar) am <span style="white-space:nowrap;">2.&nbsp;April 2015</span><span>;</span><span class="Abrufdatum"> abgerufen am 19.&nbsp;März 2015</span>.</span> <small class="archiv-bot"><span class="wp_boppel noviewer" aria-hidden="true" role="presentation"><span typeof="mw:File"><span title="i"></span></span></span>&nbsp;<b>Info:</b> Der Archivlink wurde automatisch eingesetzt und noch nicht geprüft. Bitte prüfe Original- und Archivlink gemäß Anleitung und entferne dann diesen Hinweis.</small><span style="display:none"><a rel="nofollow" class="external text" href="http://IABotmemento.invalid/http://jswiki.de/Angular-Route-Segment">@1</a></span><span style="display:none"><a rel="nofollow" class="external text" href="http://jswiki.de/Angular-Route-Segment">@2</a></span><span style="display:none">Vorlage:Webachiv/IABot/jswiki.de</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=Angular-Route-Segment+%E2%80%93+JsWiki.de%2C+das+deutsche+Wiki+rund+um+JavaScript&amp;rft.description=Angular-Route-Segment+%E2%80%93+JsWiki.de%2C+das+deutsche+Wiki+rund+um+JavaScript&amp;rft.identifier=https%3A%2F%2Fweb.archive.org%2Fweb%2F20150402151910%2Fhttp%3A%2F%2Fjswiki.de%2FAngular-Route-Segment&amp;rft.source=http://jswiki.de/Angular-Route-Segment&amp;rft.language=de">&nbsp;</span></span>
</li>
<li id="cite_note-14"><span class="mw-cite-backlink"><a href="#cite_ref-14">↑</a></span> <span class="reference-text"><span class="cite"><a rel="nofollow" class="external text" href="https://docs.angularjs.org/guide/dev_guide.services.$location"><i>Using $location.</i></a> In: <i>AngularJS Developer Documentation.</i><span class="Abrufdatum"> Abgerufen am 2.&nbsp;Oktober 2013</span> (englisch).</span><span style="display: none;" class="Z3988" title="ctx_ver=Z39.88-2004&amp;rft_val_fmt=info%3Aofi%2Ffmt%3Akev%3Amtx%3Adc&amp;rfr_id=info%3Asid%2Fde.wikipedia.org%3AAngularJS&amp;rft.title=Using+%24location&amp;rft.description=Using+%24location&amp;rft.identifier=https%3A%2F%2Fdocs.angularjs.org%2Fguide%2Fdev_guide.services.%24location&amp;rft.language=en">&nbsp;</span></span>
</li>
<li id="cite_note-15"><span class="mw-cite-backlink"><a href="#cite_ref-15">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://angulardart.org/">AngularDart – Superheroic MVW Framework for Dart</a></span>
</li>
<li id="cite_note-16"><span class="mw-cite-backlink"><a href="#cite_ref-16">↑</a></span> <span class="reference-text"><a rel="nofollow" class="external text" href="https://www.golem.de/news/angulardart-angularjs-auf-dart-portiert-1311-102579.html"><i>ANGULARDART – AngularJS auf Dart portiert</i>.</a> golem.de, 6. November 2013.</span>
</li>
</ol></div><!--htdig_noindex--><div><div class="zim-footer">
Dieser Artikel wurde von <a class="external text" title="Zuletzt bearbeitet am 2025-06-30" href="https://de.wikipedia.org/wiki/?title=AngularJS&amp;oldid=257506414">Wikipedia</a> herausgegeben. Der Text ist unter <a class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.de">Creative Commons Attribution-Share Alike 4.0</a> verfügbar, sofern nicht anders angegeben. Für die Mediendateien können zusätzliche Bedingungen gelten.
</div>
</div><!--/htdig_noindex--></div>
</div>
</main>
</div>
</div>
</div>
<script src="./_webp_/webpHandler.js"></script>

</body></html>